<template>
  <div>

    <!--    搜索框-->
    <el-input v-model="search" class="input-with-select" placeholder="请输入内容" style="float: left;width: 20%"
              @keyup.enter.native="searchClick">
      <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
    </el-input>
    <el-button
      :disabled="debuilds.length === 0"
      icon="el-icon-delete"
      style="float:left;"
      type="danger"
      @click="alldeBuild">
      一键删除
    </el-button>

    <!--    数据表格-->
    <el-table
      v-loading="loading"
      :data="students.records"
      border
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-spinner="el-icon-loading"
      element-loading-text="拼命加载中"
      style="width: 100%"
      @selection-change="changeBox">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        align="center"
        label="Id"
        prop="studentId">
      </el-table-column>
      <el-table-column
        align="center"
        label="姓名">
        <template slot-scope="scope">
          <el-popover placement="top" trigger="hover">
            <el-descriptions :title="scope.row.studentGrade" border
                             small="mini">
              <el-descriptions-item label="手机号">
                <el-tag size="small"> {{ scope.row.studentPhone }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="QQ">
                <el-tag size="small"> {{ scope.row.studentQq }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="年龄">
                <el-tag size="small"> {{ scope.row.studentAge }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.studentName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="寝室"
        prop="dormitoryId">
      </el-table-column>
      <el-table-column
        align="center"
        label="性别">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium"  :type="scope.row.studentSex === '男' ? 'primary' : 'success'">
              {{ scope.row.studentSex }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="入学年份"
        prop="studentStartYear">
        <template slot-scope="scope">
          <div slot="reference" >
            <el-tag size="medium" type="success">{{ scope.row.studentStartYear }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="学院"
        prop="studentCollege">
      </el-table-column>
      <el-table-column
        align="center"
        label="专业"
        prop="studentProfessional">
      </el-table-column>
      <el-table-column
        align="center"
        label="班级"
        prop="studentClass">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addCleandialog">添加学生</el-button>
    <!--    分页-->
    <el-pagination
      :page-size="limit"
      :total="total"
      background
      hide-on-single-page
      layout="prev, pager, next"
      @prev-click="prevClick"
      @next-click="nextClick"
      @current-change="handleCurrentChange">
    </el-pagination>
    <!--      添加页面-->
    <el-dialog
      :visible.sync="addVisible"
      :title="title">
      <el-form :model="student"
               inline
               ref="studentFrom"
               :rules="rule"
               label-width="100px"
               >
        <el-form-item label="姓名" prop="studentName">
          <el-input v-model="student.studentName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="studentAge">
          <el-input v-model="student.studentAge" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别"  prop="studentSex">
          <el-select v-model="student.studentSex" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="寝室" label-width="85px" prop="dormitoryId">
          <el-select v-model="student.dormitoryId" placeholder="寝室">
            <el-option  :label="d.dormitoryName" :value="d.dormitoryId" v-for="d in dors" :key="d.dormitoryId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="QQ" prop="studentQq">
          <el-input v-model="student.studentQq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="studentPhone">
          <el-input v-model="student.studentPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学科部" prop="studentCollege">
          <el-input v-model="student.studentCollege" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="studentClass">
          <el-input v-model="student.studentClass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="studentProfessional">
          <el-input v-model="student.studentProfessional" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入学年份" required>
          <el-date-picker type="date"
                          placeholder="选择日期"
                          v-model="student.studentStartYear"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 500px">
          <el-button @click="addVisible = false">取消</el-button>
          <el-button type="primary" @click="addFrom">{{title}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--      成功提示-->
    <el-dialog
      :visible.sync="res"
    >
      <el-result icon="success" subTitle="请根据提示进行操作" title="成功提示">
        <template slot="extra">
          <el-button size="medium" type="primary" @click="res = false">返回</el-button>
        </template>
      </el-result>
    </el-dialog>

  </div>
</template>

<script>

import student from '@/utils/student'
import dormitory from '@/utils/dormitory'

export default {
  name: 'User',
  data () {
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!this.isCellPhone(value)) {
        // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    return {
      addVisible: false,
      ids: [],
      title: '',
      dors: [],
      debuilds: [],
      students: [],
      search: '',
      total: 0,
      loading: true,
      limit: 10,
      rule: {
        studentPhone: [
          {
            required: true, // required就是这个框必须填写
            validator: validatePhone, // 规则
            trigger: 'blur' // blur失去焦点，事件何时触发
          }
        ],
        studentAge: [
          { required: true, message: '不能为空!', trigger: 'blur' },
          { message: '年龄不能超过二位数字', trigger: 'blur', pattern: /^\d{1,2}$/ }
        ],
        studentName: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ],
        studentQq: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ],
        studentStartYear: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ],
        studentProfessional: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ],
        studentCollege: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ],
        dormitoryId: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ],
        studentSex: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ],
        studentClass: [
          { required: true, message: '不能为空!', trigger: 'blur' }
        ]
      },
      student: {
        studentId: '',
        studentName: '',
        studentSex: '',
        studentAge: '',
        studentQq: '',
        studentCollege: '',
        studentClass: '',
        studentProfessional: '',
        dormitoryId: '',
        studentPhone: '',
        studentStartYear: ''
      },
      res: false
    }
  },
  methods: {
    isCellPhone (val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    handleEdit (index, row) {
      this.title = '修改'
      Object.assign(this.student, row)
      this.addVisible = true
    },
    addCleandialog () {
      this.title = '添加'
      this.student = {}
      this.addVisible = true
    },
    addFrom () {
      if (this.title === '添加') {
        this.$refs.studentFrom.validate((valid) => {
          if (valid) {
            student.addStudent(this.student).then(() => {
              this.$message.success(this.title + '成功!')
              this.addVisible = false
              this.res = true
              this.getStudents(this.students.current, this.limit, this.search)
            })
          }
        })
      } else {
        this.$refs.studentFrom.validate((valid) => {
          if (valid) {
            student.editStudent(this.student).then(() => {
              this.$message.success(this.title + '成功!')
              this.addVisible = false
              this.res = true
              this.getStudents(this.students.current, this.limit, this.search)
            })
          }
        })
      }
    },
    alldeBuild () {
      this.ids = []
      this.debuilds.forEach(builde => {
        this.ids.push(builde.studentId)
      })
      student.deleteAllStudent(this.ids).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getStudents(this.students.current, this.limit, this.search)
      })
    },
    changeBox (val) {
      this.debuilds = val
    },
    searchClick () {
      this.getStudents(1, this.limit, this.search)
    },

    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        student.deleteStudent(row.studentId).then(res => {
          this.getStudents(this.students.current, this.limit, this.search)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange (page) {
      this.getStudents(page, this.limit, this.search)
    },
    prevClick () {
      this.getStudents(this.builds.current - 1, this.limit, this.search)
    },
    nextClick () {
      this.getStudents(this.builds.current + 1, this.limit, this.search)
    },
    getStudents (page, limit, search) {
      student.getStudent(page, limit, search).then(res => {
        this.students = res.data
        this.total = parseInt(this.students.total)
        this.loading = false
      })
    }
  },
  created () {
    this.getStudents(0, this.limit, this.search)
    dormitory.getIds().then(res => {
      this.dors = res.data
    })
  }
}
</script>

<style scoped>

</style>
